<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="search-list mb-10">
        <div style="display: flex;align-items: center;margin-right: 10px">
          <el-date-picker
              v-model="timeData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              class="mr-10"
              :picker-options="pickerOptions1">
          </el-date-picker>
          <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
              class="el-icon-search"></i>搜索
          </el-button>
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStripe"
          :border="tableBorder"
          tooltip-effect="dark"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            align="center"
            prop="create_time"
            label="巡班时间"
            width="170">
        </el-table-column>
        <el-table-column
            align="center"
            label="摄像头"
            prop="facility"/>
        <el-table-column
            align="center"
            label="巡班位置">
          <template slot-scope="scope">
            {{scope.row.classes?scope.row.classes.class_name:''}}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="巡班人"
            :show-overflow-tooltip="true"
            width="170">
          <template slot-scope="scope">
            {{scope.row.user?scope.row.user.realname: ''}}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="180"
            align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="deletePoint(scope.row)" type="danger" plain>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <div class="height40"></div>
    </div>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {patrol_video_log_Index, patrol_video_log_delete} from '@/api/admin/cameraVideo'
import {mapGetters} from "vuex";

export default {
  components: {},
  computed: {
    ...mapGetters(['configData']),
  },
  data() {
    return {
      timeData: '',
      pickerOptions1: {},
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      searchBox: {
        class_id: '',
        section_id: '',
        start_time: '',
        end_time: '',
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
    }
  },
  watch: {},
  created() {
    this.InitFn()
  },
  methods: {
    downs(item) {
      let alink = document.createElement("a");
      // alink.href = openBASE_URL('http')+url;
      alink.download = `巡班记录_${item.video}`; // 图片名
      alink.href = `${this.configData.video_url}${item.video}`;
      alink.click();
    },
    // 初始化
    async InitFn() {
      let option_ = JSON.parse(JSON.stringify(this.searchBox))
      option_.p = this.page.pageindex
      patrol_video_log_Index(option_).then(res => {
        this.arryList = res.list.data;
        this.page.total = res.list.total;
      })
    },
    searchFn(option) {
      if (option === 'refresh') {
        let newGetPower = JSON.parse(JSON.stringify(this.getPower))
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower;
        this.searchBox.class_id = '';
        this.searchBox.section_id = '';
        this.searchBox.start_time = ''
        this.searchBox.end_time = ''
        this.timeData = []
      } else {
        if (this.timeData && this.timeData.length) {
          this.searchBox.start_time = this.timeData[0]
          this.searchBox.end_time = this.timeData[1]
        }
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    deletefn(id) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelCalss(id)
      }).catch(() => {
      })
    },
    async detelCalss(id) {
      let data = await this.$post(this.api.classActive.training.delete, {id: id})
      if (!data.code) {
        this.$message.success(data.msg)
        this.InitFn()
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    deletePoint(row) {
      this.$confirm(`确认删除【${row.facility}】该记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(row.id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      patrol_video_log_delete({id: id}).then(res=>{
        console.log('res:', res)
        this.$message.success('删除成功!')
        this.InitFn()
      })
    },
  },
  mounted() {
    // this.playerOptions.sources[0].src = "http://192.168.0.172/video/record/192.168.0.135_record_2022-08-30 02:58:20.mp4"
  },
}
</script>
<style>
.lead-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fddeae;
  margin-bottom: 5px;
  border-radius: 2px;
  padding: 5px 0;
}

.lead-list:last-child {
  margin-bottom: 0;
}

.lead-list span {
  margin-right: 30px;
}
</style>

